<template>
	<view>
		<view class="xtorder">
			<view class="orderchoose" >
				<text @click="chooseorder(1)" :class="[isactive==1?'activeorderstyle':'orderstyle']">系统订单</text>
				<text @click="chooseorder(2)" :class="[isactive==2?'activeorderstyle':'orderstyle']" style="margin-left: 30rpx;">附近订单</text>
			</view>
		
			<view class="splist">
			 <view class="sp" @click="godetail()" v-for="(item,index) in 10" :key="index">
				 <view class="spon">
					 <image src="/static/logo.png" mode="aspectFill"></image>
					 <view class="sponirght">
						 <view class="titles">
							 <view class="title">我是标题我是标题我是标题我是描述我是描述我是描述</view>
							 <view class="ykj"> <text style="font-size: 20rpx;color: #ccc;margin-top: 4rpx;">一口价
							 </text><text style="font-size: 20rpx;color: #FA5151 ;margin-top: 4rpx;">￥</text>70.00</view>
						 </view>
						 
						 <view class="des">我是描述我是描述我是描述我是描述我是描述我是描述</view>
						 <view class="addresss">
							 <image src="/static/logo.png" mode="aspectFill"></image>
							 <view class="address">我市地质我市地质我市地质我是描述我是描述我是描述我是描述</view>
						 </view>
						 <view class="times">
							 <image src="/static/time.png" mode="aspectFill"></image>
							 <view class="time">我是时间我是时间我是时间我是描述我是描述我是描述</view>
						 </view>
						 
					 </view>
				 </view>
				 <view class="qd">
					 <view style="width: 10rpx;"></view>
					 <view class="qqd" >去抢单</view>
				 </view>
			 </view>
			</view>
			<view class="zero">没有更多了~</view>
			
		</view>
	</view>
</template>

<script setup>
	import {reactive, ref,getCurrentInstance} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	const {proxy} = getCurrentInstance()
	
	
	const isactive = ref(1)
	const lists = ref({
		list:[],
		total:0
	})
	const scrollobj = reactive({
		triggered:false,
		pageNum:1,
		pageSize:10,
		isloading:false,
		total:0,
		isjz:false,
		pulldown:false
	})
	
	onLoad(async()=>{
		await Promise.all([contentListfun()])
	})
	const emits = defineEmits(["triggeredfun"])
	const triggeredfun = () => {
			emits("triggeredfun", false)
			console.log('命令已发送');
			
	} 
	//列表请求
	const contentListfun=async()=>{
		scrollobj.isloading = true
		var data = {
			pageNum:scrollobj.pageNum,
			pageSize:scrollobj.pageSize,
			flowStatus:'PENDING_REV',
		}
		const result = await proxy.$api.contentlistAPi(data)
		if(result.code==200){
			console.log('服务订单列表',result);
			scrollobj.isloading = false
			if(result.rows.length>0){
				lists.list = [...lists.list,...result.rows]
			}
			uni.hideLoading()
			lists.total = result.total
			triggeredfun()
		}
	}
	const godetail =(id)=>{
		uni.navigateTo({
			url:'/pages-shifu/servedetail/servedetail?id='+1
		})
	}
	//下拉刷新
	const pulldown=()=>{
		scrollobj.pageNum=1
		lists.list = []
		contentListfun()
	}
	//上啦加载
	const scrolltolower=()=>{
		if (scrollobj.total < 10) {
			proxy.$showToast('没有更多了')
			return
		}
		if (scrollobj.isloading) return;
			scrollobj.pageNum++;
			uni.showLoading({
				title: '加载中'
			});
			contentListfun()
	}
	const chooseorder=(id)=>{
		isactive.value = id
	}
	defineExpose({
		pulldown,
		scrolltolower
	})

</script>

<style lang="scss">
.xtorder{
			width: 710rpx;margin: 0 auto;;margin-top: 60rpx;
			.zero{
				font-size: 20rpx; height: 100rpx;text-align: center;line-height: 90rpx;color: #ccc;
			}
			.orderchoose{
				display: flex;align-items: center;
			}
		
			.splist{
				margin: 0 auto;
				.sp{
					background-color: #fff;width: 710rpx;height: 262rpx;
					padding: 20rpx;box-sizing: border-box;
					border-bottom: 1rpx solid #eee;
					margin-top: 40rpx;
					.spon{
						display: flex;
						image{
							width: 140rpx;height: 140rpx;border-radius: 10rpx;
						}
						.sponirght{
							display: flex;flex-direction: column;justify-content: space-between; width: 510rpx;height: 140rpx;margin-left: 20rpx;;
							.titles{
								display: flex;align-items: center;justify-content: space-between;
								.title{
									width: 300rpx;font-weight: 700;font-size: 28rpx;color: #3D3D3D;
									overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
								}
								.ykj{
									display: flex;align-items:center;font-size: 28rpx;font-weight: 700rpx;color:#FA5151 ;
								}
							}
							.des{
								width: 510rpx;font-weight: 400;font-size: 24rpx;color: #3D3D3D;white-space: nowrap;
								overflow: hidden;text-overflow: ellipsis;
							}
							.addresss{
									display: flex;align-items: center; font-size: 20rpx;color: rgba(0,0,0,0.3);

									.address{
										width: 490rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
									}
									image{
										width: 30rpx;
										height: 30rpx;
										margin-right: 12rpx;
									}
							}
							.times{
									display: flex;align-items: center;font-size: 22rpx;color: rgba(0,0,0,0.3);
									
									.time{
										width: 490rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
									}
									image{
										width: 30rpx;
										height: 30rpx;
										margin-right: 12rpx;
									}
							}
						}
					}
					.qd{
						display: flex;align-items: center;justify-content: space-between;margin-top: 30rpx;
						.qqd{
							width: 180rpx;
							height: 48rpx;
							background: #3662EC;
							border-radius: 10rpx 10rpx 10rpx 10rpx;line-height: 48rpx;
							text-align: center;font-weight: 700;font-size: 20rpx;color: #FFFFFF;
						}
					}
				}
			}
		}
</style>
